<template>
        <div class="mui-numbox" :data-numbox-min="min" >
            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
            <input  id="test" class="mui-input-numbox" type="number" :value="value" ref="shoppingNum" @change="setShoppingNum"/>
            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
        </div>
</template>
<script>
import mui from"../../lib/mui/js/mui.min.js"
export default {
    props:['min','max',"value","index"],
    mounted(){
        mui('.mui-numbox').numbox()
    },
    methods:{
        setShoppingNum(){
            this.$emit("parentEvent",parseInt(this.$refs.shoppingNum.value),this.index)
        }
    },
    watch:{
        max : function(val1,val2){    
            mui(".mui-numbox").numbox().setOption('max',val1)
        }
    }
}
</script>
<style scoped>
    .mui-numbox{
        height: 26px;
    }
</style>


